anchor checkbox
.ui.segments
    h3.ui.top.attached.huge.block.header checkbox #[a(href="#checkbox") #[i.linkify.icon]]
    .ui.attached.segment
        .ui.header Description

        pre checkbox(checked="\{{checkbox.checked1}}")
            

        pre.
            checkbox(
                checked="\{{checkbox.checked1}}"
                on-statechange="checkboxchanged"
                value="hi!"
                ) My Checkbox2 (with callback)



    .ui.segment
        .ui.large.header Examples

        .ui.medium.header Simple checkbox (no callback)
        p.
            Simple checkbox toggles #[code checked="\{{ variable }}"] on every press:
            #[checkbox.green(checked="{{checkbox.checked1}}") My Checkbox2 (no event)]

        .ui.medium.header Checkbox with callback (async checkbox)


        p.
            Async checkbox fires the callback #[code checkboxchanged]
            on every press and let the callback handle its visual state
            and #[code checked] status:
        checkbox.purple(
            checked="{{checkbox.checked1}}"
            on-statechange="checkboxchanged"
            value="hi!"
            ) My Checkbox2 (with callback)
                
        p.
            Async checkbox may also #[checkbox(checked="{{checkbox.throw}}") throw] exceptions upon press. 

        .ui.message(class="{{#if checkbox.checked1}}green{{else}}red{{/if}}").
            My checkbox state is: {{ checkbox.checked1 ? 'checked!' : 'not checked...' }}
    .ui.segment 
        p You may build states with #[code overlay] component: 
        cache-asset(src="progress/truck-tanker.png")
        overlap(width="200px") 
            img(src="progress/truck.png")
            +if('showmyoverlay1')
                img(src="progress/truck-tanker.png")
        overlap(width="100px") 
            img(src="progress/truck.png")
            +if('showmyoverlay1')
                img(src="progress/truck-tanker.png")
        checkbox(checked="{{showmyoverlay1}}") show/hide red tanker
